<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            margin-left: 50px;
            width: 100px;
            height: 100px;
            margin-top: 10px;
            background-color: red;
            transition: transform 1.5s;
        }
        div:first-of-type:active {
            /* 执行完后会恢复原来的状态 */
            /* translate(x,y) 移动方位 相对于自己左上角 */
            transform: translate(150px, 200px);
        }
        div:nth-of-type(2):active {
            /* 执行完后会恢复原来的状态 */
            /* scale(x,y) 大于1放大 小于1缩小 */
            transform: scale(2,.5);
        }
        div:nth-of-type(3) {
            /* 转换原点 */
            transform-origin: 0px 0px;
        }
        div:nth-of-type(3):active {
            /* 执行完后会恢复原来的状态 */
            /* rotate(angle) 平面旋转角度  */
            /* 同时增加多个转变  空格分开 */
            /* ******************************
                在同时增加多个转变时一定要注意一点：
                元素的坐标 随着元素的改变而改变的(如果选择 那么坐标轴也会旋转)
                transfrom 改变是相对于上一刻位置 来计算的
                如果先选择在移动 达不到效果 */
            transform: translateX(300px) rotate(-50deg);
        }
        div:nth-of-type(4):active {
            /* 执行完后会恢复原来的状态 */
            /* skew(ax) | skew(ax , ay) 斜切多少度 */
            transform: skew(30deg,30deg);
        }
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    
</body>
</html>